<template>
<div class="layoutContainer">
    <!-- 子路由出口 -->
    <router-view></router-view>
    <!-- 底部导航栏 -->
    <!-- 给tabbar--route属性  然后给每一项to属性就可以路由跳转了 -->
    <van-tabbar v-model="active" route>
        <van-tabbar-item icon="friends" to="/moment">校友圈</van-tabbar-item>
        <van-tabbar-item icon="column" to="/advice">建议</van-tabbar-item>
        <van-tabbar-item icon="comment" to="/message">消息</van-tabbar-item>
        <!-- <van-tabbar-item icon="label" to="/notice">通知</van-tabbar-item> -->
        <van-tabbar-item icon="shopping-cart" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="wap-home" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
</div>
</template>

<script>
export default {
    name: 'layoutIndex',
    data() {
        return {
            active: 0
        }
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
</style>